<template>
  <el-row class="data-screen-bottom">
    <el-col :span="6">
      <el-row>
        <!-- <el-col :span="12">
          <el-image class="data-screen-bottom-icon" :src="bottom_01" />
        </el-col> -->
        <el-col :span="24">
          <div class="data-screen-bottom-text">
            <div><el-image class="data-screen-bottom-icon" :src="bottom_01" /></div>
            <p style="text-align: center;">计访问量</p>
            <div style="text-align: center; font-size: 24px;">
              <vab-count :end-value="countConfig1.endValue" :start-value="countConfig1.startValue" />
            </div>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="6">
      <el-row>
        <!-- <el-col :span="12">
          <el-image class="data-screen-bottom-icon" :src="bottom_02" />
        </el-col> -->
        <el-col :span="24">
          <div class="data-screen-bottom-text">
            <el-image class="data-screen-bottom-icon" :src="bottom_02" />
            <p style="text-align: center;">累计用户数</p>
            <div style="text-align: center; font-size: 24px;">
              <vab-count :end-value="countConfig2.endValue" :start-value="countConfig2.startValue" />
            </div>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="6">
      <el-row>
        <!-- <el-col :span="12">
          <el-image class="data-screen-bottom-icon" :src="bottom_03" />
        </el-col> -->
        <el-col :span="24">
          <div class="data-screen-bottom-text">
            <el-image class="data-screen-bottom-icon" :src="bottom_03" />
            <p style="text-align: center;">日访问量</p>
            <div style="text-align: center; font-size: 24px;">
              <vab-count :end-value="countConfig3.endValue" :start-value="countConfig3.startValue" />
            </div>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="6">
      <el-row>
        <!-- <el-col :span="12">
          <el-image class="data-screen-bottom-icon" :src="bottom_04" />
        </el-col> -->
        <el-col :span="24">
          <div class="data-screen-bottom-text">
            <el-image class="data-screen-bottom-icon" :src="bottom_04" />
            <p style="text-align: center;">日用户数</p>
            <div style="text-align: center; font-size: 24px;">
              <vab-count :end-value="countConfig4.endValue" :start-value="countConfig4.startValue" />
              <!-- <span>万</span> -->
            </div>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { random } from 'lodash-es'
import bottom_01 from '/@/assets/data_screen_images/bottom_01.png'
import bottom_02 from '/@/assets/data_screen_images/bottom_02.png'
import bottom_03 from '/@/assets/data_screen_images/bottom_03.png'
import bottom_04 from '/@/assets/data_screen_images/bottom_04.png'

import { onMounted } from 'vue'

const countConfig1 = ref({
  startValue: 6656000,
  endValue: 6656000,
})

const countConfig2 = ref({
  startValue: 1800000,
  endValue: 1823000,
})

const countConfig3 = ref({
  startValue: 16527 * 8,
  endValue: 16527 * 8,
})

const countConfig4 = ref({
  startValue: 16527,
  endValue: 16527,
})

const exxx = (count: string | null): number => {
  if (count == null) {
    return 0
  } else {
    return parseInt(count)
  }
}


onMounted(() => {
  const count1 = localStorage.getItem('countConfig1')
  const count2 = localStorage.getItem('countConfig2')
  const count3 = localStorage.getItem('countConfig3')
  const count4 = localStorage.getItem('countConfig4')

  if (count1) {
    countConfig1.value.endValue = exxx(count1)
    countConfig2.value.endValue = exxx(count2)
    countConfig3.value.endValue = exxx(count3)
    countConfig4.value.endValue = exxx(count4)
  }

})


defineOptions({
  name: 'DataScreenBottom',
})


const timer = setInterval(() => {
  const addView = random(2 * 8, 4 * 8)
  const addUser = random(2, 4)

  if(countConfig2.value.endValue < 1800000){
    countConfig2.value.endValue = 1823000
  }

  countConfig1.value.endValue = countConfig1.value.endValue + addView;
  countConfig2.value.endValue = countConfig2.value.endValue + addUser;
  countConfig3.value.endValue = countConfig3.value.endValue + addView;
  countConfig4.value.endValue = countConfig4.value.endValue + addUser;


  localStorage.setItem('countConfig1', countConfig1.value.endValue.toString())
  localStorage.setItem('countConfig2', countConfig2.value.endValue.toString())
  localStorage.setItem('countConfig3', countConfig3.value.endValue.toString())
  localStorage.setItem('countConfig4', countConfig4.value.endValue.toString())
}, 10000)

onBeforeUnmount(() => {
  clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.data-screen-bottom-text{
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.data-screen-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  &-icon {
    display: block;
    width: 65px;
    height: 65px;
    padding: 20px;
    margin: 8px auto 0 auto;
    background: #101f58;
    border-radius: 50%;
    animation: twink 3s linear infinite;
  }

  &-text {
    // margin-top: 10px;
    font-size: 30px;
    color: #64c5d9;
    text-align: left;

    p {
      font-size: 14px;
      color: #fff;
    }
  }
}
</style>
